<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="${pageContext.request.contextPath}/js/jquery.masonry.min.js" type="text/javascript"></script>
<title>Welcome To SF Hygiene</title>

</head>

<body>
	<div class="prod_show_desc">
		<div class="prod_show_logo left">
			<img src="${pageContext.request.contextPath}/<s:property value='product.logo.path'/>" />
		</div>
		<div class="prod_show_details left">
			<h4>
				<s:property value="product.name" />
			</h4>
			<div class="prod_details_param">
				<h6>产品参数</h6>
				<table border="0" cellspacing="0" cellpadding="0">
					<tr>
						<th>参数名</th>
						<th>参数值</th>
					</tr>
					<tr>
						<td class="param_name">Material</td>
						<td><s:property value="product.material" /></td>
					</tr>
					<tr>
						<td class="param_name">Volume</td>
						<td>500ml</td>
					</tr>
				</table>
			</div>
		</div>
		<div class="clear"></div>
	</div>
	<div class="prod_show_pics">
		<div class="pictures" id='container<s:property value="product.id" />' style="position: relative;">
		   <s:iterator value="product.pictures" var="pic">
		  		<div class="ks-waterfall">
		     		<img src="${pageContext.request.contextPath}/<s:property value='%{#pic.path}'/>" width="150px" height="120px"/></a>
		     	</div>
		   </s:iterator>
		</div>
		<script>
		$(document).ready(function(){
			var $container = $('#container<s:property value='product.id' />');
	
			$container.imagesLoaded( function(){
			  $container.masonry({
			    itemSelector : '.ks-waterfall'
			  });
			});
		});

			/* KISSY.use("waterfall", function (S, Waterfall) {
				new Waterfall({
					container: "#container<s:property value='product.id' />",    //节点容器
					minColCount: 2,             //最小列数
					colWidth: 220              //每列的宽度
				});
			}); */
		</script>
	</div>
</body>